<template>
	<view >
		<view class="set-box">
			<u-form ref="uForm" :error-type="errorType" label-position="top">
				<u-form-item label="离职员工:"  label-width="180">
					<view style="width: 100%;">
						<view class="input_block" @click="onSelectClick('leave')">
							<view class="value_block" >
								<block v-if="leave_user_list.length > 0">
									<u-tag v-for="(item,index) in leave_user_list" :key="index"  :text="item.nickname" closeable mode="light" type="info" color="#000"  @close="tagDelete(index,'leave')"/>
								</block>
								<view v-else class="text">选择员工</view>
							</view>
							<view class="u-input__right-icon u-flex">
								<view class="u-input__right-icon--select u-input__right-icon__item" :class="{
									'u-input__right-icon--select--reverse': adminShow && selectText == 'leave'
								}">
									<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-m-t-10 ">
							<u-checkbox-group>
								<u-checkbox v-model="updateleave" >把员工账号改为离职</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="接受资料员工:"  label-width="180" >
					<view class="input_block" @click="onSelectClick('owner')">
						<view class="value_block" >
							<block v-if="owner_user_list.length > 0">
								<u-tag v-for="(item,index) in owner_user_list" :key="index"  :text="item.nickname" closeable mode="light" type="info" color="#000"  @close="tagDelete(index,'owner')"/>
							</block>
							<view v-else class="text">选择员工</view>
						</view>
						<view class="u-input__right-icon u-flex">
							<view class="u-input__right-icon--select u-input__right-icon__item" :class="{
								'u-input__right-icon--select--reverse': adminShow && selectText == 'owner'
							}">
								<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="分配方式:"  label-width="180" >
					<u-input type="select" :border="true" :select-open="selectShow" v-model="record_type_name" placeholder="选择方式" @click="selectShow = true" />
				</u-form-item>
			</u-form>
			<view class="u-m-t-80" style="text-align: center;">
				<u-button class="u-m-l-15" type="success"  @click="onSubmit" :custom-style="{backgroundColor: vuex_theme.color, color: vuex_theme.bgColor}" :ripple="true">立即提交</u-button>
			</view>
		</view>
		<!-- 选择审批人弹窗 -->
		<u-popup class="popup-content" mode="bottom" border-radius="38"  v-model="adminShow" >
			<view class="popup-title u-border-bottom">
				<view class=""  style="width: 45px;">
					<!-- <u-icon name="close"  color="#909399" size="30"></u-icon> -->
				</view>
				<text class="">选择员工</text> 
				<view class="" @click="adminShow = false" style="width: 45px;">
					<u-icon name="close"  color="#909399" size="30"></u-icon>
				</view>
			</view>
			<u-search margin="30rpx 20rpx" shape="square" v-model="adminkeyword" :show-action="false" :clearabled="true"  placeholder="输入员工名称搜索" @change="adminSearch"></u-search>
			<scroll-view scroll-y style="height: 760rpx;width: 100%;" @scrolltolower="adminBottom">
				<view class="list">
					<block v-if="adminList.length > 0">
						<view class="u-m-b-45">
							<view class="item u-flex u-border-bottom" v-for="(item,index) in adminList" :key="index" @click="onAdmin(item,index)">
								<view class="title" :class="{active: selectedlist.some(ele => ele.id === item.id) }">{{item.nickname}}</view>
							</view>
						</view>
						<u-loadmore :status="adminStatus" ></u-loadmore>
					</block>
					<u-empty text="暂无数据" v-else  margin-top="100" mode="list"></u-empty>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 选择方式 -->
		<u-action-sheet :list="selectList" v-model="selectShow" @click="recordTypeClick"></u-action-sheet>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				owner_user_list: [],
				leave_user_list: [],
				selectedlist: [],
				adminShow: false,
				leaveShow: false,
				adminList: [],
				adminkeyword: '',
				selectText: '',
				adminPage: 1,
				pageSize: 20, // 每一页多少条数据
				lastAdmin: false,
				adminStatus: 'loadmore',
				updateleave: true,
				selectShow: false,
				selectList: [
					{
						text: '平均分配',
						id: 1,
					},
					{
						text: '随机分配',
						id: 2,
					},
				],
				record_type_name: '平均分配',
				record_type: 1,
				errorType: ['message','toast'],
			};
		},
		// 只有onReady生命周期才能调用refs操作组件
		onReady() {
			
		},
		onLoad(e) {
			this.onSelectpage()
			let userData = uni.getStorageSync('admin_info')
			this.owner_user_list.push({
				id: userData.id,
				nickname: userData.nickname + '(' + userData.id + ')'
			})
		},
		methods: {
			// 选择
			onSelectClick(val){
				this.selectText = val
				this.adminShow = true
				switch (val){
					case 'owner':
						this.selectedlist = this.owner_user_list
						break;
						case 'leave':
						this.selectedlist = this.leave_user_list
						break;
					default:
						break;
				}
			},
			// 获取审批人
			onSelectpage(isNextPage,pages) {
				this.$u.api.getAllAdmin({
					pageNumber: (pages || 1 ),
					pageSize: this.pageSize,
					name: this.adminkeyword,
					keyField: 'id',
					showField: 'nickname',
					"q_word": this.adminkeyword,
					"searchField": "nickname"
				}).then(res => {
					if(res.code == 1 ) {
						// 最后一页
						if(res.data.list.length == 0) {
							this.lastAdmin = true
						} 
						//不够一页
						if (res.data.list.length < this.pageSize) {
							this.adminStatus = 'nomore'
						}
						// 第二页开始
						if(isNextPage) {
							this.adminList = this.adminList.concat(res.data.list)
							return 
						}
						this.adminList = res.data.list
					}
				})
			},
			// 滚动到底部加载更多
			adminBottom() {
				if(this.lastAdmin || this.adminStatus == 'loading') return ;
				this.adminStatus = 'loading'
				setTimeout(() => {
					if(this.lastAdmin) return ;
					this.onSelectpage(true,++this.adminPage)
					if(this.adminList.length >= 10) this.adminStatus = 'loadmore';
					else this.adminStatus = 'loading';
				}, 1200)
			},
			// 选择搜索
			adminSearch() {
				this.adminPage = 1
				this.lastAdmin = false
				this.onSelectpage()
			},
			tagDelete(e,type) {
				// 移除
				switch (type){
					case 'owner':
						this.owner_user_list.splice(e,1)
						this.selectedlist = this.owner_user_list
						break;
						case 'leave':
						this.leave_user_list.splice(e,1)
						this.selectedlist = this.leave_user_list
						break;
					default:
						break;
				}
			},
			// 选择员工
			onAdmin(item,index){
				let someResult = this.selectedlist.some(function(i) {
					return i.id == item.id
				});
				// 已选退出
				if(someResult) return
				switch (this.selectText){
					case 'owner':
						this.owner_user_list.push(item)
						this.selectedlist = this.owner_user_list
						break;
						case 'leave':
						this.leave_user_list.push(item)
						this.selectedlist = this.leave_user_list
						break;
					default:
						break;
				}
			},
			// 选择分配方式
			recordTypeClick(index) {
				this.selectList.forEach((item,i) =>{
					if(index == i) {
						item.color = "#1B8CFE"
					} else {
						item.color = ""
					}
				})
				this.record_type_name = this.selectList[index].text
				this.record_type = this.selectList[index].id
			},
			// 开始提交
			onSubmit(){
				
				if(this.leave_user_list.length == 0){
					// 提示
					uni.showToast({
						title: '请选择离职员工',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(this.owner_user_list.length == 0){
					// 提示
					uni.showToast({
						title: '请选择接受资料员工',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let leave_user_id = this.leave_user_list.map((item,index)=>{
					return item['id']
				})
				let owner_user_id = this.owner_user_list.map((item,index)=>{
					return item['id']
				})
				// 数据验证
				let obj = {
					leave_user_id: leave_user_id.join(','),
					owner_user_ids: owner_user_id.join(','),
					type: this.record_type,
					updateleave: this.updateleave ? 1 : '',
				}
				console.log(obj)
				this.$u.api.onRecover(obj).then((res) => {
					console.log(res)
					if(res.code == 1){
						// 提示
						this.$refs.uToast.show({
							title: res.msg,
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				})
			},
		},
	}
</script>

<style lang="scss">
.set-box {
	padding: 0rpx 22rpx;
	margin-bottom: 80rpx;
}
.input_block {
	padding: 0 10px;
	border-color: #dcdfe6;
	text-align: left;
	border-radius: 6rpx;
	border: 1px solid #dcdfe6;
	position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
	min-height: 36px;
	.value_block {
		flex: 1;
		/deep/ .u-tag {
			margin-right: 20rpx; 
		}
		.text {
			font-size: 28rpx;
			color: #c0c4cc
		}
	}
}
.popup-content {
	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
		height: 50px;
		padding-right: 25rpx;
	}
	.list {
		padding-bottom: 45rpx;
		.item {
			padding: 0 25rpx;
			justify-content: space-between;
			height: 55px;
			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 600;
			}
		}
	}
	.bottom_btn {
		text-align: right;
		padding: 28rpx 10rpx 45rpx;
	}
}
.u-input__right-icon--select {
	transition: -webkit-transform .4s;
	transition: transform .4s;
	transition: transform .4s, -webkit-transform .4s;
}
.u-input__right-icon--select--reverse{
    /* -webkit-transform: rotate(-180deg); */
    transform: rotate(-180deg);
}
.u-input__right-icon__item{
  margin-left: 10rpx;
}
.active {
	color: #cccccc;
}
</style>
